<template>
  <van-popup v-model:show="props.isPopupVisible">
    <star-nav-bar :back="closePopup" :is-scroll="true" />
    <div class="item-img"> <img :src="itemInfo.image" /></div>

    <div class="item-info">
      <h1 style="color: #ff0000; font-size: 24px; margin-bottom: 5px">
        <i style="font-size: 12px">￥</i>{{ itemInfo.price }}
      </h1>
      <h1>{{ itemInfo.name }}</h1>
      <!-- 根据传入的类型判断是显示菜品信息还是其他信息 -->
      <div v-if="setmealDishList" class="dish-list">
        菜品：
        <span v-for="item in setmealDishList" :key="item.id"> {{ item.name }}×{{ item.copies }} </span>
      </div>
      <div class="flex" style="justify-content: space-between; margin: 5px 0">
        <span style="color: #999">
          {{ itemInfo.description }}
        </span>
        <button v-if="showSelectBtn" class="select-btn" @click="openFlavorPopup">选规格</button>
        <button v-else @click="addCart(itemInfo)" class="add-cart">加入购物车</button>
      </div>
    </div>
    <!-- 评价列表 -->
    <div class="comment-list">
      <h2>评论列表</h2>
      <div v-if="props.commentList.length > 0">
        <div v-for="comment in props.commentList" :key="comment.id" class="comment-item">
          <p><strong>用户名:</strong> {{ comment.userName }}</p>
          <p><strong>评论时间:</strong> {{ comment.commentTime }}</p>
          <p><strong>评论内容:</strong> {{ comment.comment }}</p>
        </div>
      </div>
      <star-empty v-else />
    </div>
  </van-popup>
</template>
<script setup lang="ts">
import type { CommentItem } from '@/types/comment'
import type { DishItemResult, SetmealDishItem, SetmealItemResult } from '@/types/meal'

const props = defineProps<{
  itemInfo: DishItemResult | SetmealItemResult
  commentList: CommentItem[]
  // 套餐中菜品列表
  setmealDishList?: SetmealDishItem[]
  // 弹出框是否显示
  isPopupVisible: boolean
  // 是否应该显示选规格按钮
  showSelectBtn?: boolean
}>()
const emits = defineEmits<{
  (e?: 'open-flavorpopup'): void
  (e: 'close-popup'): void
  (e: 'add-cart', itemInfo: DishItemResult | SetmealItemResult): void
}>()
// 关闭菜品弹窗
const closePopup = () => {
  emits('close-popup')
}
// 打开菜品口味弹窗
const openFlavorPopup = () => {
  emits('open-flavorpopup')
}
const addCart = (itemInfo: DishItemResult | SetmealItemResult) => {
  console.log(itemInfo)

  emits('add-cart', itemInfo)
}
</script>
<style scoped lang="scss">
.van-popup {
  height: 100%;
  min-width: 100%;
  box-sizing: border-box;
}

.select-btn,
.add-cart {
  border-radius: 5px;
}
.item-img{
  width: 100%;
  height: 200px;
  overflow: hidden;
  img{
    height: 100%;
    object-fit: cover;
  }
}

.item-info {
  background: #fff;
  padding: 10px;
  display: flex;
  flex-direction: column;

  .dish-list {
    font-size: 14px;
    margin: 5px 0;
  }
}

.comment-list {
  padding: 10px;
  margin-top: 20px;
}

.comment-item {
  border: 1px solid #eee;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
}
</style>
